<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h1>vue</h1>
    <introduce :title="msg"></introduce>
    <introduce1 :title="msg1"></introduce1>
    <for-introduce :items="lessons"></for-introduce>

</div>


<script src="node_modules/vue/dist/vue.js"></script>
<script type="text/javascript">
    const introduce = {
        // 直接使用props接收到的属性来渲染页面
        template: '<h1>{{title}}</h1>',
        props: ['title'] // 通过props来接收一个父组件传递的属性
    }
    const introduce1 = {
        // 直接使用props接收到的属性来渲染页面
        template: '<h1>{{title}}</h1>',
        props: ['title'] // 通过props来接收一个父组件传递的属性
    }
    const forIntroduce = {
        // 直接使用props接收到的属性来渲染页面
        template: `<ul><li v-for="item in items" :key="item.id ">{{item.id }}:{{item.name}}</li></ul>`,
        props: {
            items: {
                type: Array,
                default: 'java'
            }
        } // 通过props来接收一个父组件传递的属性
    }
    const app = new Vue({
        el: "#app",
        data: {
            msg: "hello world",
            msg1: "vue",
            lessons: [{id: 1, name: 'java'},
                {id: 2, name: 'php'},
                {id: 3, name: 'ios'},]
        },
        components: {
            introduce,
            introduce1,
            forIntroduce
        }
    })
</script>
</body>
</html>